<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layoutAdmin}">

<head>
	<meta charset="UTF-8">
	<title>分享文章</title>
	<link rel="stylesheet" th:href="@{/plug/wedit/css/style.css}" />
	<script th:src="@{/plug/wedit/index.js}"></script>
	<style>
		#editor—wrapper {
			border: 1px solid #ccc;
			z-index: 100;
			/* 按需定义 */
		}

		#toolbar-container {
			border-bottom: 1px solid #ccc;
		}

		#editor-container {
			height: 500px;
		}
	</style>
</head>

<body>
	<div layout:fragment="fragment_body">
		<el-row :gutter="20">
			<el-col :span="24">
				<el-button type="primary" @click="openShareInfo(null)">添 加</el-button>
				<el-table :data="shareInfos" border highlight-current-row style="width: 100%">
					<!-- -->
					<el-table-column prop="shareUserId" label="发布人">
						<template slot-scope="scope">
						{{scope.row.shareSubtitle == 'admin'? '管理员' : scope.row.account.accountNick}}
						</template>
					</el-table-column>
					<el-table-column prop="shareTitle" label="标题">
						
					</el-table-column>
					<!--<el-table-column prop="shareSubtitle" label="副标题"></el-table-column>-->
					<el-table-column prop="shareTime" label="时间"></el-table-column>
					<el-table-column label="操作" width="160px">
						<template slot-scope="scope">
							<el-button @click="openShareView(scope.row)" type="text" size="small">查看</el-button>
							<el-button @click="openShareInfo(scope.row)" type="text" size="small">修 改</el-button>
							<el-popconfirm title="是否删除？" @confirm="delShareInfo(scope.row.shareId)">
								<el-button slot="reference" type="text" size="small">删 除</el-button>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<!--弹框-->
		<el-dialog :title="shareInfoForm.ttitle" :visible.sync="shareInfoForm.visible" width="30%">
			<el-form :model="shareInfoForm" :rules="shareInfoRules" ref="shareInfoForm" label-width="100px">
				<!-- -->
				<el-form-item label="标题" prop="shareTitle">
					<el-input v-model="shareInfoForm.shareTitle"></el-input>
				</el-form-item>
				<!--<el-form-item label="副标题" prop="shareSubtitle">
					<el-input v-model="shareInfoForm.shareSubtitle"></el-input>
				</el-form-item>-->
				<el-form-item label="内容" prop="shareText">
					<el-input 
					v-model="shareInfoForm.shareText"
					type="textarea"
					:autosize="{ minRows: 5, maxRows: 10}"
  					maxlength="500"
  					show-word-limit
					></el-input>
					<!--<div ref="toolbar" id="toolbar">
					</div>
					<div ref="editor" id="editor" style="height: 500px;">
					</div>-->
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeShareInfo">取 消</el-button>
				<el-button type="primary" @click="saveShareInfo">保 存</el-button>
			</span>
		</el-dialog>
		<!--弹框-->
		<el-dialog title="预览" :visible.sync="showVisible" width="30%">
			<el-row>
				<el-col v-html="showText"></el-col>
					
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeShareView">关闭</el-button>
			</span>
		</el-dialog>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	//mainApp.components= { Editor, Toolbar }
	/**let checkText = (rule, value, callback) => {
		value = this.we.txt.html();
		if (!value) {
			return callback(new Error('请输入内容'));
		} else {
			callback();
		}
	}**/
	let vueData = {
		we: null,
		shareInfos: [],
		selectShareInfo: null,
		shareInfoForm: {
			visible: false,
			ttitle: '新增/修改',
			shareId : '',
			shareUserId : '',
			shareTitle : '',
			shareSubtitle : 'admin',
			shareText : '',
			shareTime : '',
		},
		shareInfoQuery: {
			page: '',
			size: '',
		},
		shareInfoRules: {
			shareId: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			shareTitle: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			shareSubtitle: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			shareText: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
		},
		showText: '',
		showVisible: false
	}
	let vueMethods = {
		getShareInfos() {
			let that = this
			postRequst('/admin/getShares', that.shareInfoQuery, true).then(function (resp) {
				that.shareInfos = resp.rows
				if (resp.rows && resp.rows.length > 0) {
					that.selectShareInfo = resp.rows[0]
				}
			})
		},
		openShareView(row) {
			this.showText = row.shareText
			this.showVisible = true
		},
		closeShareView() {
			this.showVisible = false
		},
		openShareInfo(row) {
			let that = this
			if (row) {
				that.shareInfoForm.ttitle = '修改'
				that.shareInfoForm.shareId = row.shareId
				that.shareInfoForm.shareTitle = row.shareTitle
				that.shareInfoForm.shareSubtitle = row.shareSubtitle
				that.shareInfoForm.shareText = row.shareText
			} else {
				that.shareInfoForm.ttitle = '新增'
				that.shareInfoForm.shareId = ''
				that.shareInfoForm.shareTitle = ''
				//that.shareInfoForm.shareSubtitle = ''
				that.shareInfoForm.shareText = ''
			}
			that.shareInfoForm.visible = true
			//that.we = createEditor(that.$refs.toolbar, that.$refs.editor);
			//that.we.html('123');
		},
		closeShareInfo() {
			this.$refs["shareInfoForm"].resetFields();
			this.shareInfoForm.visible = false
		},
		saveShareInfo() {
			let that = this
			this.$refs["shareInfoForm"].validate((valid) => {
				if (valid) {
					postRequst('/admin/saveShare', that.shareInfoForm).then(function (resp) {
						if (resp.status == 0) {
							that.getShareInfos()
							that.shareInfoForm.visible = false
							that.$message({message: resp.msg, type: "success"});
						} else {
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		delShareInfo(shareId) {
			let that = this
			postRequst('/admin/delShare', {shareId: shareId}, true).then(function (resp) {
				if (resp.status == 0) {
					that.getShareInfos()
					that.$message({message: resp.msg, type: "success"});
				} else {
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
	}
	function vueCreated() {
		let that = this
		that.getShareInfos()
		setTimeout(function(){
			//let toolbar = document.getElementById('toolbar')
			//let editor = document.getElementById('editor')
			//that.we = createEditor(that.$refs.toolbar, that.$refs.editor);
		},500)
	}
	/**mainApp.mounted = function (){
		console.log(document.getElementById('toolbar'))
			console.log(document.getElementById('editor'))
	}**/
</script>

</html>